<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<meta charset="UTF-8">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="http://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->

    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->


</head>
<body>
<div id="collection" th:fragment="collection">
    <!--    一个关注-->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <link rel="icon" href="message/img/favicon.ico" type="image/x-icon"/>
    <script src="http://code.jquery.com/jquery-3.4.1.js "
            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin=" anonymous "></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js "></script>
    <script src="http://how2j.cn/study/vue.min.js"></script>
    <script src="http://how2j.cn/study/axios.min.js"></script>

    <script src="http://how2j.cn/study/fetch.min.js"></script>

    <div class="collection_list" v-for="(message,index) in messages.data" :key="index" v-model="messages[index]">
        <div class="collection_list_image">

        </div>
        <div class="collection_list_content">
            <a style="float: left;width:550px;font-size: 18px;font-weight: 600;color: inherit;
    text-decoration: none;">{{message.questionname}}</a>
            <div  style="float: left; font-size: 19px;color: #646464;">
                {{message.username}}
            </div>
            <div style="float: left;font-size: 13px;color: #646464;" v-html="message.content">{{message.content}}
            </div>

        </div>
        <div class="collection_list_button">

            <div class="agree" v-if="message.show1" style="float: left;border-color: transparent;">
                <button
                        style="padding: 0 10px;width: 110px;height: 32px;color: #0084ff;
                background: rgba(0,132,255,.1);font-size: 14px;line-height: 32px;border-radius: 3px;border-color: transparent;
                outline: none;-webkit-appearance: none;font: inherit;"
                        @click="onagree(index)">
                    <svg class="Zi Zi--TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10" height="10"><path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z" fill-rule="evenodd"></path></svg>️赞同{{message.approve}}
                </button>
            </div>
            <div class="agreeadd" v-if="!message.show1" style="float: left;border-color: transparent;">
                <button
                        style="padding: 0 10px;width: 110px;height: 32px;color: #0084ff;
                background: rgba(0,132,255,.1);font-size: 14px;line-height: 32px;border-radius: 3px;border-color: transparent;
                color: #fff;
                background: #0084ff;
                outline: none;-webkit-appearance: none;font: inherit;"
                        @click="onagree(index)">
                    <svg class="Zi Zi--TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10" height="10"><path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z" fill-rule="evenodd"></path></svg>
                    ️已赞同{{message.approve+1}}
                </button>
            </div>
            <div class="disagree" v-if="message.show2" style="float: left;margin-left: 7px;border-color: transparent;">
                <button
                        style="padding: 0 10px;width: 40px;height: 32px;color: #0084ff;
                background: rgba(0,132,255,.1);font-size: 14px;line-height: 32px;border-radius: 3px;border-color: transparent;
                outline: none;-webkit-appearance: none;font: inherit;"
                        @click="ondisagree(index)">
                    <svg class="Zi Zi--TriangleDown" fill="currentColor" viewBox="0 0 24 24" width="10" height="10"><path d="M20.044 3H3.956C2.876 3 2 3.517 2 4.9c0 .326.087.533.236.896L10.216 19c.355.571.87 1.143 1.784 1.143s1.429-.572 1.784-1.143l7.98-13.204c.149-.363.236-.57.236-.896 0-1.386-.876-1.9-1.956-1.9z" fill-rule="evenodd"></path></svg>
                </button>
            </div>
            <div class="disagreeadd" v-if="!message.show2" style="float: left;margin-left: 7px;border-color: transparent;">
                <button
                        style="padding: 0 10px;width: 40px;height: 32px;color: #0084ff;border-color: transparent;
                background: rgba(0,132,255,.1);font-size: 14px;line-height: 32px;border-radius: 3px;
                color: #fff;
                background: #0084ff;
                outline: none;-webkit-appearance: none;font: inherit;"
                        @click="ondisagree(index)">
                    <svg class="Zi Zi--TriangleDown" fill="currentColor" viewBox="0 0 24 24" width="10" height="10"><path d="M20.044 3H3.956C2.876 3 2 3.517 2 4.9c0 .326.087.533.236.896L10.216 19c.355.571.87 1.143 1.784 1.143s1.429-.572 1.784-1.143l7.98-13.204c.149-.363.236-.57.236-.896 0-1.386-.876-1.9-1.956-1.9z" fill-rule="evenodd"></path></svg>
                </button>
            </div>
            <div class="function">
                <div class="collection" @click="removeCollection()">
                    <svg style="margin-top: 8px;float: left;" class="Zi Zi--Star Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path d="M5.515 19.64l.918-5.355-3.89-3.792c-.926-.902-.639-1.784.64-1.97L8.56 7.74l2.404-4.871c.572-1.16 1.5-1.16 2.072 0L15.44 7.74l5.377.782c1.28.186 1.566 1.068.64 1.97l-3.89 3.793.918 5.354c.219 1.274-.532 1.82-1.676 1.218L12 18.33l-4.808 2.528c-1.145.602-1.896.056-1.677-1.218z" fill-rule="evenodd"></path></svg>
                    <span style="margin-top: 7px;float: left;margin-left:5px " v-if="message.show3" @click="removeCollection(index,message.answerid)">已收藏</span>
                    <span style="margin-top: 7px;float: left;margin-left:5px "v-if="!message.show3" @click="removeCollection(index,message.answerid)">未收藏</span>
                </div>
            </div>
            <div style="float:right;margin-top: 5px;font-size: 14px;color: #8590a6;">
                回答时间<span >{{message.answertime}}</span>
            </div>
        </div>

    </div>


    <script>
        var username = $.cookie('zhihu');
        var userid = $.cookie('zhihuid');
        // var url = "http://localhost:8080/getMessage?username=" + username;
        var url = "http://localhost:8080/getCollection?id=" + userid;

        new Vue({
            el: '#collection',
            data: {
                messages: []
            },
            created: function () {
                autodivheight();

                function autodivheight() { //函数：获取尺寸
                    //获取浏览器窗口高度
                    var winHeight = 0;
                    if (window.innerHeight)
                        winHeight = window.innerHeight;
                    else if ((document.body) && (document.body.clientHeight))
                        winHeight = document.body.clientHeight;
                    //通过深入Document内部对body进行检测，获取浏览器窗口高度
                    if (document.documentElement && document.documentElement.clientHeight)
                        winHeight = document.documentElement.clientHeight;
                    //DIV高度为浏览器窗口的高度
                    // document.getElementById("message").style.height = winHeight + "px ";
                }

                window.onresize = autodivheight; //浏览器窗口发生变化时同时变化DIV高度

                self = this
                fetch(url).then(function (response) {
                    response.json().then(function (jsonObject) {
                        self.messages = jsonObject
                    })
                }).catch(function (err) {
                    console.log("Fetch错误:" + err);
                });

            },

            methods: {
                toggleShow: function (index, swi) {
                    this.messages.data[index].show = !this.messages.data[index].show
                    if (swi == "1") {
                        fetch("http://localhost:8080/getCollection?uid=" + userid + "&fid=" + this.messages.data[index].fid);
                    }
                    if (swi == "0") {
                        fetch("http://localhost:8080/removeFollow?uid=" + userid + "&fid=" + this.messages.data[index].fid);
                    }
                },
                onagree:function(index){
                    if(this.messages.data[index].show1){
                        fetch("http://localhost:8080/addAprove?kind=1&answerid="+this.messages.data[index].answerid);
                    }
                    else{
                        fetch("http://localhost:8080/addAprove?kind=0&answerid="+this.messages.data[index].answerid);
                    }
                    this.messages.data[index].show1=!this.messages.data[index].show1;
                    this.messages.data[index].show2="true";

                },
                ondisagree:function(index){
                    this.messages.data[index].show2=!this.messages.data[index].show2;
                    this.messages.data[index].show1="true";
                },

                removeCollection:function(index,answerid){
                    if(this.messages.data[index].show3)
                    {
                        fetch("http://localhost:8080/removeCollection?kind=0&uid="+userid+"&answerid="+answerid);

                    }
                    else{

                        fetch("http://localhost:8080/removeCollection?kind=1&uid="+userid+"&answerid="+answerid);
                    }

                    this.messages.data[index].show3=!this.messages.data[index].show3;

                }

            },

            mounted: {}

        })
    </script>
    <style>

    </style>


</div>

